<template>
  <span>{{ currentValue }}</span>
</template>

<script>
import { ref, onMounted, onUnmounted } from 'vue';

export default {
  props: {
    startVal: {
      type: Number,
      default: 0
    },
    endVal: {
      type: Number,
      required: true
    },
    duration: {
      type: Number,
      default: 2000
    }
  },
  setup(props) {
    const currentValue = ref(props.startVal);
    let intervalId;

    const startCounting = () => {
      const startTime = Date.now();
      const increment = (props.endVal - props.startVal) / (props.duration / 16);

      intervalId = setInterval(() => {
        const elapsed = Date.now() - startTime;
        if (elapsed < props.duration) {
          currentValue.value += increment;
        } else {
          currentValue.value = props.endVal;
          clearInterval(intervalId);
        }
      }, 16);
    };

    onMounted(() => {
      startCounting();
    });

    onUnmounted(() => {
      clearInterval(intervalId);
    });

    return {
      currentValue
    };
  }
};
</script>